<template>
  <div class="settings-page flex flex-1 h-full">
    <!-- 左侧导航栏 -->
    <div
      :class="[
        'bg-card border-r border-border flex flex-col transition-all duration-300',
        isMobile ? (showSidebar ? 'w-60 z-20' : 'w-0 overflow-hidden') : 'w-60'
      ]">
      <!-- 移动端顶部栏 -->
      <div v-if="isMobile" class="p-4 border-b border-border flex items-center justify-between">
        <h1 class="text-lg font-bold text-foreground">{{ getTranslation('settings.title') }}</h1>
        <button class="p-2 hover:bg-muted rounded-lg transition-colors" @click="showSidebar = false">
          <i class="i-mdi-close w-5 h-5" />
        </button>
      </div>

      <!-- 导航菜单 -->
      <div class="flex-1 overflow-y-auto">
        <nav class="flex flex-col p-2 space-y-1">
          <a
            v-for="item in menuItems"
            :key="item.id"
            :class="[
              'flex items-center px-3 py-2 rounded-md text-sm font-medium cursor-pointer transition-colors',
              activeMenuItem === item.id ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted'
            ]"
            @click="selectMenuItem(item.id)">
            <i :class="[item.icon, 'mr-3 w-5 h-5']" />
            {{ getTranslation(`settings.menu.${item.id}`) }}
          </a>
        </nav>
      </div>
    </div>

    <!-- 右侧内容区域 -->
    <div class="flex-1 flex flex-col overflow-hidden">
      <!-- 移动端顶部栏 -->
      <div v-if="isMobile" class="p-4 border-b border-border bg-card flex items-center justify-between">
        <button class="p-2 hover:bg-muted rounded-lg transition-colors" @click="showSidebar = true">
          <i class="i-mdi-menu w-5 h-5" />
        </button>
        <h1 class="text-lg font-bold text-foreground">{{ getCurrentMenuTitle() }}</h1>
        <div class="w-9"></div>
        <!-- 占位符保持居中 -->
      </div>

      <!-- 内容区域 -->
      <div class="flex-1 bg-background relative">
        <div class="absolute top-0 left-0 w-full h-full overflow-y-auto p-4 md:p-6">
          <!-- 根据 activeMenuItem 显示对应组件 -->
          <ModelService v-if="activeMenuItem === 'model'" />
          <GeneralSettings v-else-if="activeMenuItem === 'general'" />
          <AppearanceSettings v-else-if="activeMenuItem === 'appearance'" />
          <ShortcutSettings v-else-if="activeMenuItem === 'shortcuts'" />
          <DataSettings v-else-if="activeMenuItem === 'data'" />
          <AboutSettings v-else-if="activeMenuItem === 'about'" />

          <!-- 默认提示 -->
          <div v-else class="flex items-center justify-center h-full">
            <div class="text-center">
              <i class="i-mdi-cog w-16 h-16 text-muted-foreground mx-auto mb-4" />
              <p class="text-muted-foreground">{{ getTranslation('settings.selectCategory') }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 移动端遮罩层 -->
    <div
      v-if="isMobile && showSidebar"
      class="fixed inset-0 bg-black/50 z-40 md:hidden"
      @click="showSidebar = false"></div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';

import i18n from '@/i18n';

import AboutSettings from './components/AboutSettings.vue';
import AppearanceSettings from './components/AppearanceSettings.vue';
import DataSettings from './components/DataSettings.vue';
import GeneralSettings from './components/GeneralSettings.vue';
// 导入所有设置组件
import ModelService from './components/ModelService.vue';
import ShortcutSettings from './components/ShortcutSettings.vue';

// 翻译函数
const getTranslation = (key: string) => {
  return i18n.global.t(key);
};

// 菜单项定义
const menuItems = [
  { id: 'model', icon: 'i-mdi-cloud-outline' },
  { id: 'general', icon: 'i-mdi-cog' },
  { id: 'appearance', icon: 'i-mdi-monitor' },
  { id: 'shortcuts', icon: 'i-mdi-keyboard-variant' },
  { id: 'data', icon: 'i-mdi-database' },
  { id: 'about', icon: 'i-mdi-information' }
];

// 当前激活的菜单项
const activeMenuItem = ref(localStorage.getItem('settings-activeMenuItem') || 'model');

// 响应式状态
const windowWidth = ref(window.innerWidth);
const showSidebar = ref(false);

// 是否为移动端
const isMobile = computed(() => windowWidth.value < 768);

// 监听窗口大小变化
const handleResize = () => {
  windowWidth.value = window.innerWidth;
  // 在大屏幕时自动关闭移动端侧边栏
  if (!isMobile.value) {
    showSidebar.value = false;
  }
};

// 切换菜单项
const selectMenuItem = (menuId: string) => {
  activeMenuItem.value = menuId;
  // 移动端选择后自动关闭侧边栏
  if (isMobile.value) {
    showSidebar.value = false;
  }
};

// 获取当前菜单标题
const getCurrentMenuTitle = () => {
  return getTranslation(`settings.menu.${activeMenuItem.value}`);
};

watch(activeMenuItem, (newVal) => {
  localStorage.setItem('settings-activeMenuItem', newVal);
});

// 生命周期
onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped>
.settings-page {
  /* 确保在移动端侧边栏有正确的层级 */
}

/* 移动端侧边栏样式 */
@media (max-width: 767px) {
  .settings-page > div:first-child {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 50;
  }
}

/* 大屏幕样式 */
@media (min-width: 768px) {
  .settings-page > div:first-child {
    position: relative;
  }
}
</style>
